<template>
  <div class="recommend">
    <!-- 轮播图 -->
    <div class="swiper">
       <van-swipe
        class="remd-swiper"
        :autoplay="3000"
        indicator-color="white"
        lazy-render
      >
        <van-swipe-item v-for="item in swiperImgList" :key="item">
          <img :src="item.imageUrl" alt="图片" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 推荐歌单 -->
    <section class="recommend-playlist">
      <div class="remd-header">
        <h3>推荐歌单</h3>
      </div>
      <ul class="remd-playlist">
        <li v-for="(item,index) in playlist" :key="item.id" >
         <router-link :to="`/m/playList/${item.id}`">
            <img v-img-lazy="item.picUrl" alt="图片" class="cover">
            <p class="name ellipsis-2">{{item.name}}</p>
         </router-link>
        </li>
      </ul>
    </section>
    <!-- 推荐新歌 -->
    <section class="recommend-newsong">
      <div class="remd-header">
        <h3>新歌推荐</h3>
      </div>
      <ul class="remd-newsong">
        <li v-for="(item, i) in newSongList" :key="item.id" @click="addSong(item)">
          <img class="pic" v-img-lazy="item.picUrl" alt="新歌封面" />
          <div class="info">
            <h4 class="name">{{ item.name }}</h4>
            <p>
              <span v-for="(aItem, aI) in item.song.artists" :key="aItem.id">
                {{ aItem.name }}
              </span>
            </p>
          </div>
          <SvgIcon class="icon" iconName="player"/>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import {getRecommendSwiper,getRecommendPlaylist,getRecommendNewSong} from '@/api/recommend'
import { onMounted, reactive,ref } from "vue";
import { useStore } from "vuex"
import { useRouter } from "vue-router"
  onMounted(()=>{
    getSwiperImg()
    getRecommendNewList()
    getNewSongList()
  })
  let store = useStore()
  let swiperImgList = reactive([])
  let playlist = reactive([])
  let newSongList =reactive([])

  // 请求轮播图数据
  let getSwiperImg = () => {
    getRecommendSwiper({ type: 2 })
      .then((res) => {
        swiperImgList.push(...res.data.banners);
      })
      .catch((err) => {
        console.log("请求轮播数据出错", err);
      });
  };

    // 请求推荐歌单数据
  let getRecommendNewList=()=>{
    getRecommendPlaylist()
    .then(res=>{
      // console.log('推荐歌单',res); 
      playlist.push(...res.data.result)
    })
    .catch(err=>{ console.log("请求推荐新歌数据出错", err);})
  }

  // 请求获取推荐新歌数据
  let getNewSongList = () => {
    getRecommendNewSong()
      .then((res) => {
        newSongList.push(...res.data.result);
      })
      .catch((err) => {
        console.log("获取推荐的新歌数据", err);
      });

}
let addSong=({id, name, picUrl, song})=>{
  
  // console.log('re',id, name, picUrl, song);
  store.dispatch("addOneSong",{id, name, picUrl, song})
}
</script>

<style lang="less" scoped>
.recommend{
  .swiper{
    width: 100%;
    .remd-swiper {
    .van-swipe-item {
      img {
        width: 100%;
      }
    }
  }
  }

   width: 100%;
  .remd-header {
    margin: 10px;
    h3 {
      height: 26px;
      font-size: @font-size-large;
      line-height: 2em;
      color: @light-color;
      letter-spacing: 0.12em;
      font-weight: bold;
    }
  }
}
.recommend-playlist {
  .remd-playlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    li {
      flex: 0 0 32%;
      max-width: 32%;
      margin: 10px 0;
      box-sizing: border-box;
      img {
        width: 100%;
        height: auto;
        border-radius: 10px;
      }
      p {
        -webkit-box-orient: vertical;
        height: 3em;
        line-height: 1.5em;
        color: @light-color;
        font-size: @font-size-small;
      }
    }
  }
}
.remd-newsong {
    margin:0 10px;
  li {
    position: relative;
    display: flex;
    height: 60px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    .pic {
      width: 56px;
      height: 56px;
      border-radius: 10px;
    }
    .info {
      overflow: hidden;
      flex: 1;
      margin-left: 12px;
      height: 100%;
      border-bottom: @dark-color-m solid 1px;
      h4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        color: @light-color-m;
        font-size: @font-size-medium;
      }
      p {
        margin-top: 10px;
        color: @dark-color-m;
        font-size: @font-size-small;
      }
    }
    .icon{
        position: absolute;
        margin-top: auto;
        margin-bottom: auto;
        width: 24px;
        height: 24px;
        top: 0;
        bottom: 0;
        right: 0;
        font-size: 2em;
        color: @dark-color;
    }
  }
}
</style>